<template>
  <div class="notice-detail">
    <h2>通知详情</h2>
    <div class="notice-info">
      <p><strong>标题:</strong> {{ notice.title }}</p>
      <p><strong>发件人:</strong> {{ notice.sender }}</p>
      <p><strong>内容:</strong> {{ notice.content }}</p>
    </div>
    <el-button type="primary" @click="goBack">返回</el-button>
  </div>
</template>


<script>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import axios from 'axios';
import {BASE_URL} from "@/config";

export default {
  setup() {
    const route = useRoute();
    const notice = ref({});

    const fetchNoticeDetail = async () => {
      const { id } = route.params;
      try {
        const response = await axios.get(`http://localhost:8000/api/notifications/${id}`);
        notice.value = response.data;
      } catch (error) {
        console.error('获取通知详情失败:', error);
      }
    };

    onMounted(() => {
      fetchNoticeDetail();
    });

    return {
      notice,
    };
  },
};
</script>


<style scoped>
.notice-detail {
  padding: 20px;
  background-color: #f7f7f7;
}

.notice-info {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
}

.notice-info p {
  margin: 10px 0;
}
</style>
